<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.min.css}">

<script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>

<body>
<div>
    <button type="button" class="btn btn-primary"
            data-toggle="modal" data-target="#addLayer">添加记录</button>

</div>
<br>
<div id="tb">
      输入搜索:<input type="text" id="ming" placeholder="账号/名字">
    <button type="button" onclick="sousuo()"  class="btn btn-success">搜索</button>
</div>




<table id="myTable"></table>

<div class="modal fade" id="addLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加用户</h4>

            </div>
            <div class="modal-body">
                <form id="myForm">
                    账号:<input type="text"  class="form-control" name="user_name"> <br>
                    名字:<input type="text" class="form-control"  name="user_nickname" >
                    邮箱:<input type="text" class="form-control" name="user_email" >
                    密码:<input type="password" class="form-control" name="user_password" ><br>
                    备注 <textarea class="form-control" rows="5"  name="info"></textarea>

                    <br>
                    是否启用:<input type="radio" name="user_state"  value = "1" >是 <input type="radio" name="user_state"  value = "1" >否
                </form>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="sub()">确认添加</button>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="editLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title">编辑用户</h4>

            </div>
            <div class="modal-body">
                <form id="myForm1" class="form-horizontal">
                 <input type="hidden" id="user_id" class="form-control" name="user_id"> <br>
                    账号:<input type="text" id="user_name" class="form-control" name="user_name"> <br>
                    名字:<input type="text" class="form-control"  name="user_nickname" id="user_nickname">
                    邮箱:<input type="text" class="form-control" name="user_email" id="user_email">
                    密码:<input type="password" class="form-control" name="user_password" id="user_password"><br>
                    备注 <textarea class="form-control" rows="5" id="info" name="info"></textarea>
                    <br>
                    是否启用:<input type="radio" name="user_state"  value = "1" id="qi">是 <input type="radio" name="user_state"  value = "1" id="fou">否
                </form>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary" type="button" onclick="update()">确定</button>
            </div>

        </div>
    </div>
</div>

<!--编辑-->
<div class="modal fade" id="editLayer1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title">授权</h4>

            </div>
            <div class="modal-body">
                <form id="myForm2" class="form-horizontal">
                    <input type="hidden" id="id" class="form-control" name="id"> <br>
                    <input type="hidden" id="userid" class="form-control" name="user_id"> <br>
                    <select class="form-control" name="user_type">
                        <option value="5">超级管理员
                        <option value="6">订单管理员
                        <option value="7">商品管理员

                    </select>
                    <br>
                </form>
            </div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                <button class="btn btn-primary" type="button" onclick="update2()">确定</button>
            </div>

        </div>
    </div>
</div>
</body>
<script>
    $("#myTable").bootstrapTable({
        url:"user/getUser",
        columns:[
            {field:"xuan",checkbox:true},
            {field:"user_id",title:"编号"},
            {field:"user_name",title:"账号"},
            {field:"user_nickname",title:"姓名"},
            {field:"user_email",title:"邮箱"},
            {field:"add_time",title:"添加时间"},
            {field:"login_time",title:"登录时间",formatter:function (value, row){
                    if(value==null || value==''){
                        return "N/A";
                    }else{
                        return  value;
                    }
                },
            },

            {field:"cz",title:"是否启用",formatter:function (value,row){
                    var str='<button class="btn btn-info" onclick="qi(\'' + row.id+ '\','+row.user_id+')">是</button>';
                    var str2='<button class="btn btn-info" onclick="guan(\'' + row.id+ '\','+row.user_id+')">否</button>';
                     return str+"  "+str2;
                }},
            {field:"cxz",title:"操作",formatter:function(value,row){
                    var str='<button class="btn btn-info" onclick="del(\'' + row.id+ '\','+row.user_id+')">删除</button>';
                    var str1='<button class="btn btn-success"  data-toggle="modal" data-target="#editLayer" onclick="getId(\'' + row.id+ '\')">编辑</button>';
                    var str2='<button class="btn btn-success"  data-toggle="modal" data-target="#editLayer1" onclick="edit(\'' + row.id+ '\','+row.user_id+')">分配角色</button>';

                    return str+"     "+str1+"    "+str2;
                }},
        ],
        pagination:true,
        pageSize:10,
        pageList:[2,4,6,8,10],
        sidePagination: "client",
        toolbar:"#tb",
    })
 function del(id,user_id){
        $.ajax({
            url:"user/del",
            data:{user_id:user_id,id:id},
            success:function(){
                //bootbox.confirm("成功", "info")
                $("#myTable").bootstrapTable('refresh');
            }
        })
    }
    function qi(id,user_id){

        $.ajax({
            url:"user/qi",
            data:{user_id:user_id,id:id},
            success:function(){
                //bootbox.confirm("成功", "info")
                alert("启用成功")
                $("#myTable").bootstrapTable('refresh');
            }
        })
    }
    function guan(id,user_id){
        $.ajax({
            url:"user/guan",
            data:{user_id:user_id,id:id},
            success:function(){
                alert("关闭")
                //bootbox.confirm("成功", "info")
                $("#myTable").bootstrapTable('refresh');
            }
        })
    }
  function sub(){
       $.ajax({
           url:"user/add",
           type:"post",
           data:$("#myForm").serialize(),
           dataType:"json",
           success:function(){
               alert("成功")
               $('#myTable').bootstrapTable('refresh');//刷新表格
               $("#addLayer").modal('hide');
           },error:function(){
               alert("成功")
               $('#myTable').bootstrapTable('refresh');//刷新表格
               $("#addLayer").modal('hide'); //关闭弹窗
           }
       })
   }
   function getId(id){
       $.ajax({
           url:"user/getHui",
           data:{id:id},
           type:"post",
           dataType:"json",
           success:function(data){
               $("#user_id").val(data.user_id);
               $("#user_name").val(data.user_name);
               $("#user_password").val(data.user_password);
               $("#user_nickname").val(data.user_nickname);
               $("#user_email").val(data.user_email);
               $("#info").val(data.info);
               $("#qi").val(data.user_state);
               $("#fou").val(data.user_state);

           }
       })
   }
   function update(){
       $.ajax({
           url:"user/update",
           type:"post",
           data:$("#myForm1").serialize(),
           dataType:"json",
           success:function(){
               alert("成功")
               $('#myTable').bootstrapTable('refresh');//刷新表格
               $("#editLayer").modal('hide');
           },error:function(){
               alert("成功")
               $("#myTable").bootstrapTable('refresh');
               $("#editLayer").modal('hide'); //关闭弹窗
           }
       })
   }

    function edit(id){
        $.ajax({
            url:"user/getHui2",
            data:{id:id},
            type:"post",
            dataType:"json",
            success:function(data){
                $("#userid").val(data.user_id);
                $("#id").val(data.id);


            }
        })
    }
    function update2(){
        $.ajax({
            url:"user/update2",
            type:"post",
            data:$("#myForm2").serialize(),
            dataType:"json",
            success:function(){
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#editLayer1").modal('hide');
            },error:function(){
                $("#myTable").bootstrapTable('refresh');
                $("#editLayer1").modal('hide'); //关闭弹窗
            }
        })
    }
    //调查
    function sousuo(){
        $("#myTable").bootstrapTable("refresh", {
            "query": {
                user_name: $("#ming").val(),
            }
        });
    }
</script>
</html>